<template>
  <div class="login-page">
    <img class="robot-logo" src="../../assets/images/J0Kmlo2yYr.jpg" />
    <!--        <img src="../../assets/images/login-box-bg.svg">-->
    <div class="right">
      <img class="login-logo" src="../../assets/images/login_logo.png" />
      <div class="login-container">
        <div class="login-title">DROBOT - 微前端门户系统</div>
        <a-form :label-col="{ span: 5 }" label-align="left" :model="form">
          <a-form-item label="用户名">
            <a-input v-model:value="form.phone" placeholder="请输入用户名"></a-input>
          </a-form-item>
          <a-form-item label="密码">
            <a-input v-model:value="form.password" type="password" placeholder="请输入密码"></a-input>
          </a-form-item>
        </a-form>
        <div class="bottom-btn" label="用户名">
          <a-button class="login" type="primary" @click="login">登录</a-button>
          <a-button class="register">注册</a-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue'
import useCurrentInstance from 'lib-utils/vueInstance'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
import { registerRoutes } from '../../router/registerRoutes'
let route = useRouter()
let store = useStore()
const { proxy } = useCurrentInstance()
let form = reactive({
  phone: '',
  password: ''
})
const login = () => {
  proxy.$http.post(proxy.$api.user.login, form).then(res => {
    store.commit('setCommonStore', {
      token: res.token
    })
    proxy.$http.get(proxy.$api.user.userPermission).then(res => {
      store.commit('setCommonStore', {
        menuList: res.menuList,
        btnList: res.btnList,
        appList: res.appList,
        userInfo: res.userInfo
      })
      registerRoutes().then((routePath: any) => {
        route.push(routePath)
      })
    }).catch(err => {

    })
  }).catch(err => {

  })
}
</script>

<style lang="less" scoped>
.login-page {
  height: 100vh;
  width: 100vw;
  position: relative;

  .robot-logo {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100%;
    object-fit: fill;
  }
}

.right {
  position: absolute;
  right: 0;
  top: 0;
  width: 450px;
  height: 100vh;
  background: #ffffff;
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  .login-logo {
    width: 260px;
    height: 260px;
    object-fit: cover;
    margin-bottom: 80px;
  }

  .login-container {
    width: 360px;

    .login-title {
      text-align: center;
      margin-bottom: 30px;
      font-size: 25px;
      font-weight: bold;
      color: #505050;
    }

    .bottom-btn {
      margin-top: 60px;
      display: flex;
      justify-content: center;

      .login {
        margin-right: 30px;
        width: 165px;
      }

      .register {
        width: 165px;
      }
    }
  }
}
</style>